<template>
    <div class="blog-container">
        <Layout>
            <template #main>
                <div class="blog-index" ref="container">
                    <News
                        v-for="item in blog_data.rows"
                        :key="item.id"
                        :data="item"
                        v-loading="is_loading"
                    />
                    <Pager
                        :cur_page="route_info.page"
                        :total_page="total_page"
                        @page_change="handle_page"
                    />
                </div>
            </template>
            <template #right>
                <span
                    :class="{ active: route_info.cate_id === -1 }"
                    @click="toggle_all"
                    >【全部】
                </span>
                <span class="count">数量：{{ total_blog }}</span>
                <RightList
                    :list="cate_data"
                    @select="toggle_cate"
                    v-loading="is_loading0"
                />
            </template>
        </Layout>
    </div>
</template>

<script>
import Layout from "@/components/Layout"
import Pager from "@/components/Pager"
import News from "./components/News"
import RightList from "./components/RightList"
import { get_data, back_top } from "@/mixins"
import { request } from "@/utils"

export default {
    components: {
        Layout,
        News,
        RightList,
        Pager
    },
    mixins: [
        get_data({
            url: "/api/blog",
            data_name: "blog_data",
            data_value: {}
        }),
        get_data({
            url: "/api/blogtype",
            data_name: "cate_data",
            is_loading: "is_loading0"
        }),
        back_top()
    ],
    computed: {
        route_info() {
            return {
                cate_id: +this.$route.params.cate_id || -1,
                page: +this.$route.query.page || 1,
                limit: +this.$route.query.limit || 10
            }
        },
        total_page() {
            return Math.ceil(this.blog_data.total / this.route_info.limit)
        },
        total_blog() {
            return this.cate_data.reduce((a, b) => a + b.articleCount, 0)
        }
    },
    methods: {
        // /blog/cate/5?page=5&limit=10
        handle_page(page) {
            const query = {
                // query: ? 后的参数
                page,
                limit: this.route_info.limit
            }
            // 查看全部文章
            if (this.route_info.cate_id === -1) {
                // 无跳转的修改地址
                this.$router.push({ name: "Blog", query })
            } else {
                // 查看某个分类的文章
                this.$router.push({
                    name: "CategoryBlog",
                    params: { cate_id: this.route_info.cate_id },
                    query
                })
            }
        },
        toggle_cate(item) {
            if (item.id === this.route_info.cate_id) {
                return
            }
            this.$router.push({
                name: "CategoryBlog",
                params: { cate_id: item.id }
            })
        },
        toggle_all() {
            if (this.route_info.cate_id === -1) {
                return
            }
            this.$router.push({ name: "Blog" })
        }
    },
    watch: {
        // 监听属性，如果路由信息发生变化，重新请求信息
        ["$route.params"](new_val) {
            this.$refs.container.scrollTop = 0
            this.is_loading = true
            // 如果分类改变了，传上分类参数，否则不传
            const params = new_val.cate_id ? `?cate_id=${new_val.cate_id}` : ""
            request.get("/api/blog" + params).then((data) => {
                this.blog_data = data
                this.is_loading = false
            })
        }
    }
}
</script>

<style lang="less">
@import "~@/styles/var.less";
.blog-container {
    width: 100%;
    height: 100%;
    .layout-container {
        .main {
            width: 100%;
            height: 100%;
            margin: 0 15px;
            .blog-index {
                width: 100%;
                height: 100%;
                overflow-y: auto;
                // 设置平滑滚动
                scroll-behavior: smooth;
                .pager-container {
                    margin: 10px auto 20px;
                }
            }
        }
        .right {
            padding-top: 15px;
            width: 200px;
            box-sizing: border-box;
            span {
                cursor: pointer;
                &.active {
                    color: @warn;
                }
                &.count {
                    cursor: auto;
                    margin-left: 15px;
                    font-size: 12px;
                    color: @secondary;
                }
            }
        }
    }
}
</style>
